<script setup>
import { inject, reactive, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import colorTool from '@/utils/color';

const tool = inject('$TOOL');
const $config = inject('$CONFIG');
var { t, locale, messages } = useI18n();
const data = reactive({
  config: {
    locale: messages.value[locale.value].el,
    size: 'default',
    zIndex: 10,
    button: {
      autoInsertSpace: false,
    },
    message: {
      max: 3,
    },
  },
});
onMounted(() => {
  // 设置主题颜色
  const app_color = tool.data.get('APP_COLOR') || $config.COLOR;
  if (app_color) {
    document.documentElement.style.setProperty('--el-color-primary', app_color);
    for (let i = 1; i <= 9; i++) {
      document.documentElement.style.setProperty(
        `--el-color-primary-light-${i}`,
        colorTool.lighten(app_color, i / 10)
      );
    }
    for (let i = 1; i <= 9; i++) {
      document.documentElement.style.setProperty(
        `--el-color-primary-dark-${i}`,
        colorTool.darken(app_color, i / 10)
      );
    }
  }
});
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
// import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <el-config-provider
    :locale="data.config.locale"
    :size="data.config.size"
    :zIndex="data.config.zIndex"
    :button="data.config.button"
    :message="data.config.message"
  >
    <router-view></router-view>
  </el-config-provider>
</template>

<style lang="scss">
@import '@/style/style.scss';
</style>
